在上一章几何图形(Geometry)结束以后,我们已经可以根据数据绘制出如下简单的图形元素了。虽然目前通过下面这些图我们已经能获得一些基本的信息,但是这些信息还不够明确。

比如:在上面的第一个柱形图中蓝色的条对应柱子最矮,说明其对应的数据实体的某个属性最小,但具体是哪个数据实体的哪个属性、这个属性的值又具体是多少,这些信息我们就不知道了。
所以我们除了基本的几何图形之外,还需要一些基本的辅助组件(Guide)来帮助我们理解图表,获取更多的信息,比如坐标轴(Axis),图例(Legend)和标注(Annotation)。

那么接下来我们将从辅助组件理论讲起,然后深入了解并且实现坐标轴和图例,最后在小结部分简单介绍一下标注。
# 辅助组件理论(Guide)
辅助组件理论这部分主要介绍坐标轴和图例,理解它们的核心在于理解:如果几何元素是对数据本身的可视化,那么坐标轴和图例就是对比例尺的可视化。
对于每一个比例尺来说,它的辅助组件是坐标轴还是图例,取决于和比例尺绑定的视觉通道。而具体的坐标轴和图例的类型取决于比例尺的种类。
当一个比例尺和水平位置通道 x 或者和竖直位置通道 y 绑定的时候,那么它的辅助组件就是坐标轴。
比如下图中 x 通道绑定的 Band 比例尺对应底部的坐标轴,这种坐标轴是水平坐标轴(AxisX)。 y 通道绑定的 Linear 比例尺对应是左边坐标轴,这种坐标轴就是竖直坐标轴(AxisY)。

如果是在极坐标系下,那么两种比例尺的展现又会有所不同。

当一个比例尺和颜色,形状这些非位置通道绑定的时候,它对应的辅助组件就是图例。比如下图中颜色通道绑定的 Oridnal 比例尺对应底部的图例,因为 Ordinal 是离散的比例尺,所以对应的是样品图例(LegendSwatches)。

当然如果这个颜色通道对应的是连续形比例尺的话,那么这个比例尺就是坡道图例(LegendRamp)。比如下面的颜色通道用的是 Linear 比例尺,所以对应的图例就是一个坡道图例。

简单了解了一下坐标轴和比例尺,那么接下来就进入我们的开发环节。
# 坐标轴(Axis)
首先我们来看一看坐标轴的绘制。不管对应什么比例尺,一个比较完整的坐标轴会包含下面三个部分:刻度、标签和格子。

刻度是由比例尺的 ticks 方法或者定义域决定的。如果是连续比例尺(Linear,Log 和 Time 等),它们的刻度就是 ticks 方法返回的值。如果是离散比例尺(Ordianl 和 Point 等),它们的刻度就是定义域本身。
比如下图中底部的坐标轴的刻度就是对应 Band 比例尺的定义域:['1991', '1992', '1993', ...],而左边的坐标轴的刻度就是对应的 Linear 比例尺在 [0, 13] 这个范围内生成的 ticks。

格子是根据刻度生成,每一个刻度都会生成一条线,根据坐标系的不同,这条线可能是直线,也可能是曲线。
标签的位置一般由第一个或者最后一个刻度决定,它主要用于说明当前比例尺绑定的数据的对应属性。
在不同的坐标系下 AxisX 和 AxisY 的展现形式不同,根据是否是极坐标(isPolar)以及是否转置坐标系(isTranspose),可以将它们分别分为四种类型:
(isPolar: false, isTranspose: false)(isPolar: false, isTranspose: true)(isPolar: true, isTranspose: true)(isPolar: true, isTranspose: false)
如果上面的四种类型分别用 00、 01、 11、 10 来表示,那么 axisX 在不同坐标系的展示如下。

axisY 在不同坐标系的展示如下。

了解了坐标轴的不同样子,接下来我们首先抽象出一个创建坐标轴的函数:createAxis。该函数会返回一个绘制坐标轴的函数,它根据当前的坐标系选择不同的刻度、标签和格子绘制函数,从而绘制整个坐标轴。
// src/guide/axis.js
import { identity } from '../utils';
// components 不同坐标系对应的绘制组件
// labelOf 获取标签绘制需要的刻度
export function createAxis(components, labelOf) {
// renderer 渲染器
// scale 比例尺
// cooridante 坐标系
// domain 比例尺的定义域(对离散比例尺有用)
// label 绘制的标签内容
// tickCount 刻度数量(对连续比例尺有用)
// formatter 格式化刻度的函数
// tickLength 刻度的长度
// fontSize 刻度文本和标签的字号
// grid 是否绘制格子
